<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%--
  Created by IntelliJ IDEA.
  User: 董灌磊
  Date: 2024/4/9
  Time: 9:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="/webjars/layui/2.6.8/css/layui.css">
    <script src="/webjars/layui/2.6.8/layui.js"></script>
</head>
<body>
<div class="layui-container">
    <div class="layui-form" id="searchForm" lay-filter="searchForm">
        <div class="layui-inline">
            <label class="layui-form-label">业主名:</label>
            <div class="layui-input-inline">
                <input type="text" name="ownername" placeholder="输入业主名" class="layui-input">
            </div>
        </div>
       <%-- <div class="layui-inline">
            <label class="layui-form-label">小区名:</label>
            <div class="layui-input-block">
                <select name="plotid" id="plotids">
                    <option value="">请选择小区</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">停车场类型:</label>
            <div class="layui-input-block">
                <select name="parktype" id="parktypes">
                    <option value="">请选择</option>
                    <option value="地上">地上</option>
                    <option value="地下">地下</option>
                </select>
            </div>
        </div>--%>
        <div class="layui-inline">
            <button class="layui-btn" onclick="search()" >查询</button>
        </div>
        <div class="layui-inline">
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    <table id="plotTable" lay-filter="plotTables"  class="layui-table layui-table-hover"></table>
    <%--续租页面--%>
    <div id="carxuzus" style="display:none;padding:20px">
        <div class="layui-form-item">
            <label class="layui-form-label">结束时间:</label>
            <div class="layui-input-block">
                <input type="date" name="xuzutime" id="xuzutime" required  class="layui-input">
            </div>
        </div>
    </div>
    <%--添加页面--%>
    <div id="add" style="display:none;padding:20px">
        <form class="layui-form" id="addForm" lay-filter="addForm">
            <div class="layui-form-item">
                <label class="layui-form-label">小区名:</label>
                <div class="layui-input-block">
                    <select name="plotid" id="plotid">
                        <option value="0">请选择小区</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">停车场名:</label>
                <div class="layui-input-block">
                    <input type="text" name="parkcode" required  class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">停车场类型:</label>
                <div class="layui-input-block">
                    <select name="parktype" id="parktype">
                        <option value="">请选择</option>
                        <option value="地上">地上</option>
                        <option value="地下">地下</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">创建时间:</label>
                <div class="layui-input-block">
                    <input type="text"  disabled=“disabled” name="createtime" id="today" required  class="layui-input">
                </div>
            </div>
        </form>
    </div>
    <%--生成停车缴费单--%>
    <div id="stopcarmoney" style="display:none;padding:20px">
        <form class="layui-form" id="addstopcarmoney" lay-filter="addstopcarmoney">
            <input type="hidden" name="ownerid" id="ownerid">
            <input type="hidden" name="id" id="id">
            <div class="layui-form-item">
                <label class="layui-form-label">业主姓名:</label>
                <div class="layui-input-block">
                    <input type="text" name="ownername" id="ownername" required  class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">车位名称:</label>
                <div class="layui-input-block">
                    <input type="text" name="parklotname" id="parklotname" required  class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">停车场名:</label>
                <div class="layui-input-block">
                    <input type="text" name="parkname"id="parkname" required  class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">开始时间:</label>
                <div class="layui-input-block">
                    <input type="text" name="starttime" id="startname" required  class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">结束时间:</label>
                <div class="layui-input-block">
                    <input type="text" name="endtime" id="endtime" required  class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">计费规则:</label>
                <div class="layui-input-block">
                    <input type="text" name="money" id="money"  required  class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">总价钱:</label>
                <div class="layui-input-block">
                    <input type="text" name="zomoney" id="zomoney" required  class="layui-input">
                </div>
            </div>
        </form>
    </div>
    <div class="layui-container" id="xuzu"  style="display: none">
        <table class="layui-hide" lay-filter="test" id="daoqitable">
            <%--  <tr>
                  <th>编号</th>
                  <th>业主</th>
                  <th>业主手机号</th>
                  <th>停车场名称</th>
                  <th>车位编号</th>
              </tr>--%>
        </table>
    </div>

    <script>
        function today(){//构建方法
            var today=new Date();//new 出当前时间
            var h=today.getFullYear();//获取年
            var m=today.getMonth()+1;//获取月
            var d=today.getDate();//获取日
            var H = today.getHours();//获取时
            var M = today.getMinutes();//获取分
            var S = today.getSeconds();//获取秒
            return h+"-"+m+"-"+d+" "+H+":"+M+":"+S; //返回 年-月-日 时:分:秒
        }
        document.getElementById("today").value = today();//将获取到的 年-月-日 时:分:秒 赋给input文本输入框
    </script>

</div>
</div>
<%--头部工具栏，添加--%>
<script type="text/html" id="barDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="update">停用</a>
    </div>
</script>
<script>
    let $=layui.$
   /* $.get("/property/plot/show")
        .then(({data})=>{
            console.log(data);
            //data:数组
            $(data).each(function (i,e){
                let option = $("<option value='"+e.id+"'>"+e.plotname+"</option>");
                $("[name=plotid]").append(option);
            });
            //重新渲染下拉列表
            layui.form.render('select');
        });*/
    layui.use(function (){
        let table=layui.table;
        table.render({
            id:"one",
            elem:"#plotTable",
            url:"/park/parkingcarlist",
            page:true,
            limit : 6,
            limits : [6,12,18,24],
            cols:[[
                {field:'number',align: 'center',type:'numbers',title:"编号"},
                {field:'id',align: 'center',hide:true,title:"序号"},
                {field:'ownerid',align: 'center',title:"业主姓名",templet(r) {
                        return r.owners.ownername;
                    }},
                {field:'parking',align: 'center',title:"车位名称",templet(r) {
                        return r.parkinglot.parkingcode;
                    }},
                {field:'parking',align: 'center',title:"停车场名",templet(r) {
                        return r.parkinglot.park.parkcode;
                    }},
                {field:'starttime',align: 'center',title:"开始时间"},
                {field:'endtime',align: 'center',title:"结束时间",templet(r) {
                        return r.endtime==null?"-":r.endtime;
                    }},
                {field:'price',align: 'center',title:"收费规则",templet(r) {
                    if(r.parkingstate.id==1){
                        return r.parkingstate.price+'/永久';
                    }else if(r.parkingstate.id==2){
                        return r.parkingstate.price+'/月'
                    }else if(r.parkingstate.id==4){
                        return r.parkingstate.price+'/小时'
                    }
                    }},
                {field:'parkstateid',align: 'center',title:"车位状态",templet(r){
                    if(r.parkingstate.id==1){
                        return "<span style='color: red'>"+r.parkingstate.parstatename+"</span>"
                    }else  if(r.parkingstate.id==2){
                        return "<a class='layui-btn layui-btn-xs layui-btn-primary'lay-event='stopcarmoney'>生成缴费单</a>"
                    }else  if(r.parkingstate.id==4){
                        return "<span style='color: blue'>"+r.parkingstate.parstatename+"</span>"
                    }
                    }},
            ]]
        })
        //监听行工具栏事件
        table.on("tool(plotTables)",function (obj){
            if(obj.event == "stopcarmoney"){
                if(obj.data.carmoney==0){
                    stopcarmoney(obj)
                }else{
                    layui.layer.open({
                        type : 0,
                        title : "提示",
                        area:["260px","180px"],
                        content:"已有缴费单，需要重新生成吗？",
                        icon : 3,
                        btn:["确定","取消"],
                        yes(){
                            stopcarmoney(obj)
                        }
                    });

                }

            }
        })
    })
    //点击去查询
    function search(){
        //获取表单的值,表单序列化
        var where = layui.form.val('searchForm');
        console.log(where)
        //条件查询，重载表格因为键和值都是where，所以可以值保留键
        layui.table.reload('one',{
            page: {
                curr:1
            },
            where:where
        });
    }

    function stopcarmoneys(obj){
        $("#id").val(obj.id);
        $("#ownerid").val(obj.owners.id);
        $("#ownername").val(obj.owners.ownername);
        $("#parklotname").val(obj.parkinglot.parkingcode);
        $("#parkname").val(obj.parkinglot.park.parkcode);
        $("#startname").val(obj.starttime);
        $("#endtime").val(obj.endtime);
        $("#money").val(obj.parkingstate.price);
        var startTime = $("#startname").val();
        var endTime = $("#endtime").val();

        var startDateTime = new Date(startTime);
        var endDateTime = new Date(endTime);

        var timeDiff = endDateTime - startDateTime;

        var secondsDiff = Math.floor(timeDiff / 1000);
        var minutesDiff = Math.floor(secondsDiff / 60);
        var hoursDiff = Math.floor(minutesDiff / 60);
        var daysDiff = Math.floor(hoursDiff / 24);

        // 输出时间差
        console.log("时间差：" + daysDiff + " 天 " + hoursDiff % 24 + " 小时 " + minutesDiff % 60 + " 分钟 " + secondsDiff % 60 + " 秒");

        var zomoney=300/30*daysDiff
        $("#zomoney").val(zomoney);

        //通过表单序列化，获取输入的内容
        let addstopcarmoney = layui.form.val("addstopcarmoney");
        console.log(addstopcarmoney)
        //发送ajax请求
        $.post("/park/stopcarmoney",addstopcarmoney)
            .then(({msg})=>{
            });
    }





    function stopcarmoney(obj){
        console.log(obj)

            var data = obj.data;
            $("#id").val(data.id);
            $("#ownerid").val(data.owners.id);
            $("#ownername").val(data.owners.ownername);
            $("#parklotname").val(data.parkinglot.parkingcode);
            $("#parkname").val(data.parkinglot.park.parkcode);
            $("#startname").val(data.starttime);
            $("#endtime").val(data.endtime);
            $("#money").val(data.parkingstate.price);

        var startTime = $("#startname").val();
        var endTime = $("#endtime").val();

        var startDateTime = new Date(startTime);
        var endDateTime = new Date(endTime);

        var timeDiff = endDateTime - startDateTime;

        var secondsDiff = Math.floor(timeDiff / 1000);
        var minutesDiff = Math.floor(secondsDiff / 60);
        var hoursDiff = Math.floor(minutesDiff / 60);
        var daysDiff = Math.floor(hoursDiff / 24);

        // 输出时间差
        console.log("时间差：" + daysDiff + " 天 " + hoursDiff % 24 + " 小时 " + minutesDiff % 60 + " 分钟 " + secondsDiff % 60 + " 秒");

        var zomoney=300/30*daysDiff
        $("#zomoney").val(zomoney);
        //弹窗
        layui.layer.open({
            type : 1,
            title : "停车缴费单",
            area:["500px","500px"],
            content: $("#stopcarmoney"),
            icon : 3,
            btn:["确定","取消"],
            yes(){
                //通过表单序列化，获取输入的内容
                let addstopcarmoney = layui.form.val("addstopcarmoney");
                console.log(addstopcarmoney)
                //发送ajax请求
                $.post("/park/stopcarmoney",addstopcarmoney)
                    .then(({msg})=>{
                        //关闭弹出层
                        layui.layer.close(layui.layer.index);
                        //弹出消息提示框
                        layui.layer.msg(msg);
                        //刷新表格
                        layui.table.reload('one');
                    });
            }
        });
    }
</script>

<script>

    $.post("/park/parkingcarlists").then(({data})=>{
        var daoqi=[];
        var open=0;
        $(data).each(function (i,e){
            // 获取当前时间的 Date 对象
            var date = new Date();
// 使用 Date 对象的 get 方法来获取年、月、日
            var year = date.getFullYear();
            var month = (date.getMonth() + 1).toString().padStart(2, '0'); // getMonth() 返回的月份是从 0 开始的
            var day = date.getDate().toString().padStart(2, '0');
            var hours = date.getHours().toString().padStart(2, '0');
            var minutes = date.getMinutes().toString().padStart(2, '0');
            var seconds = date.getSeconds().toString().padStart(2, '0');
// 拼接成 yyyy-MM-dd 格式的字符串
            var currentDate = year + '-' + month + '-' + day+' '+hours+":"+minutes+":"+seconds;
            if(currentDate>=e.endtime){
                daoqi.push(e);
                open=1;
            }

        })
       /* var daoqitable = $("#daoqitable");*/
       /* $(daoqi).each(function (i,e){
            var tr = $("<tr></tr>").appendTo(daoqitable);
            $("<td></td>").html(e.id).appendTo(tr)
            $("<td></td>").html(e.owners.ownername).appendTo(tr)
            $("<td></td>").html(e.owners.ownerphone).appendTo(tr)
            $("<td></td>").html(e.parkinglot.park.parkcode).appendTo(tr)
            $("<td></td>").html(e.parkinglot.parkingcode).appendTo(tr)
        })*/
console.log(daoqi)
        layui.use(function (){
            let table=layui.table;
            table.render({
                id:"TWO",
                elem:"#daoqitable",
               data:daoqi,
                cols:[[
                    {type: 'radio', fixed: 'left'},
                    {field:'id',width:135,align: 'center',title:"序号"},
                    {field:'ownername',width:135,align: 'center',title:"业主姓名",templet(r) {
                            return r.owners.ownername;
                        }},
                    {field:'ownerphone',width:135,align: 'center',title:"业主手机号",templet(r) {
                            return r.owners.ownerphone;
                        }},
                    {field:'ownername',width:135,align: 'center',title:"停车场名",templet(r) {
                            return r.parkinglot.park.parkcode;
                        }},
                    {field:'parkingcode',width:135,align: 'center',title:"停车场类型",templet(r) {
                            return r.parkinglot.parkingcode;
                        }},
                ]],

            })

            var huan="";
            table.on('radio(test)', function(obj) {
                let d=layui.table.checkStatus('TWO').data;
                huan=d[0]
            })
            if (open==1){
                layui.layer.open({
                    type:1,
                    title:"以下车位到期,联系业主是否续租",
                    area:["800px","400px"],
                    skin:'custom-layer-title',
                    content:$("#xuzu"),
                    btn:["续租","停止"],
                    yes(){
                        if (huan==""){
                            layui.layer.msg("必须选择一个")
                            return false;
                        }else {
                            carxuzu(huan)
                        }
                    },
                    btn2(){
                        if (huan==""){
                            layui.layer.msg("必须选择一个")
                            return false;
                        }
                           /* $.post("/ParkRule/deleteparkcarbyid?id="+huan.id).then(({data})=>{
                                layui.layer.msg(data);
                            })*/
                        $.post("/park/deleteparkcarbyid?id="+huan.id).then(({msg})=>{
                            layui.layer.msg(msg)
                        })

                    }
                })
            }
        })

    })


    function  carxuzu(huanzu){
        console.log(huanzu)
        if(huanzu.carmoney==0){
            stopcarmoneys(huanzu)
            layui.layer.open({
                type: 1,
                title: "续租时间",
                area: ["400px", "400px"],
                content:$("#carxuzus"),
                btn: ["确定", "取消"],
                yes(){
                    var xuzutime = $("[name=xuzutime]").val();
                    if(xuzutime!=null&&xuzutime!=""){
                        $.ajax({
                            url: "/park/carxuzu?xuzutime="+xuzutime,
                            type: "POST",
                            data: JSON.stringify(huanzu),
                            dataType: "json",
                            contentType: "application/json; charset=utf-8",
                            success: function (data) {
                                //关闭弹出层
                                layui.layer.closeAll();
                                //弹出消息提示框
                                console.log(data)
                                //刷新表格
                                layui.table.reload('one');
                            },
                            error:function () {
                            }
                        });
                        alert(11111111)
                    }else {
                        alert(222222222222)
                    }
                }
            })
        }else {
            layui.layer.open({
                type: 1,
                title: "续租时间",
                area: ["400px", "400px"],
                content:$("#carxuzus"),
                btn: ["确定", "取消"],
                yes(){
                    console.log(huanzu)
                    var xuzutime = $("[name=xuzutime]").val();
                    if(xuzutime!=null&&xuzutime!=""){
                        $.ajax({
                            url: "/park/carxuzu?xuzutime="+xuzutime,
                            type: "POST",
                            data: JSON.stringify(huanzu),
                            dataType: "json",
                            contentType: "application/json; charset=utf-8",
                            success: function (data) {
                                //关闭弹出层
                                layui.layer.closeAll();
                                //弹出消息提示框
                                console.log(data)
                                //刷新表格
                                layui.table.reload('one');
                            },
                            error:function () {
                            }
                        });
                       /* $.post("/park/carxuzu",huanzu).then(({msg})=>{
                            layui.layer.msg(msg)
                        })*/
                        alert(11111111)
                    }else {
                        alert(222222222222)
                    }
                }
            })
        }
    }
</script>

</body>
</html>
